import React, { useEffect, useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { Button, Popconfirm, Modal, Form, Input, Radio, InputNumber, Select, App } from 'antd'
import { useModel } from '@umijs/max'
import { PlusOutlined } from '@ant-design/icons'

export default () => {
  const { GetRoleList, DelRole } = useModel('RoleList')
  const { platformType } = useModel('Global')

  const tableRef = useRef()
  const [currentPage, setCurrentPage] = useState(1) //  当前页码
  const [pageSize, setPageSize] = useState(10) //  每页数量
  const { message } = App.useApp()

  // 删除
  const handleDelete = async id => {
    const res = await DelRole({ id })
    if (res) {
      message.success('删除成功')
      tableRef.current.reload()
    }
  }

  // 新增或者编辑
  const handleAddAndEdit = (type, row) => {
    let url = `/roleAddAndEdit`
    if (type === 'edit') {
      url += `?id=${row.id}`
    }

    window.open(url)
  }

  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      width: 80,
      align: 'center',
      hideInSearch: true
    },
    {
      title: '角色名称',
      dataIndex: 'role_name',
      align: 'center'
    },
    {
      title: '权限数量',
      dataIndex: 'buttons_count',
      align: 'center',
      hideInSearch: true,
      hideInTable: platformType === 0
    },
    {
      title: '发布时间',
      dataIndex: 'created_at',
      align: 'center',
      hideInSearch: true
    },
    {
      title: '操作',
      key: 'option',
      width: 150,
      valueType: 'option',
      fixed: 'right',
      render: (_, row, index, action) => {
        return (
          <>
            <Button type='link' key='edit' onClick={() => handleAddAndEdit('edit', row)}>
              编辑
            </Button>
            <Popconfirm
              key='delete'
              title='删除角色会导致对应的账号权限将不可使用，是否确定将该角色删除？'
              onConfirm={() => handleDelete(row.id)}
              okText='确认'
              cancelText='取消'
            >
              <Button type='link' danger>
                删除
              </Button>
            </Popconfirm>
          </>
        )
      }
    }
  ]

  return (
    <>
      <ProTable
        actionRef={tableRef}
        request={async params => {
          const filters = {
            role_name: params.role_name
          }

          const param = {
            page: params.current,
            page_size: params.pageSize,
            ...filters
          }

          setCurrentPage(params.current)
          setPageSize(params.pageSize)

          const res = await GetRoleList(param)

          return {
            data: res.data,
            success: true,
            total: res.total
          }
        }}
        pagination={{
          pageSize: pageSize,
          current: currentPage
        }}
        rowKey='id'
        scroll={{ x: 'max-content' }}
        columns={columns}
        headerTitle={
          <Button
            icon={<PlusOutlined />}
            key={Math.random().toString()}
            type='primary'
            onClick={() => handleAddAndEdit('add')}
          >
            添加角色
          </Button>
        }
        search={{
          defaultCollapsed: false,
          labelWidth: 80,
          span: 6
        }}
      />
    </>
  )
}
